﻿<!DOCTYPE html>
<html>
<head>
    <!-- support for mobile touch devices -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="../cornerstone.min.css" rel="stylesheet">
    <style type="text/css">
        .index {
            position: absolute;
            bottom: 5px;
            right: 5px;
            color: white;
        }
    </style>

</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1>
                Stack Scroll Synchronizer Example
            </h1>
            <p>
                This page contains an example of the scroll stack synchronizer tool.  It detects changes made
                to the index within a single viewport and syncronizes the offset with the sychronized elements.
                (e.g. Scrolling will increment / decrement the index of each viewport in the synchronizer).
            </p>

        </div>

        <div class="row">
            <div class="col-xs-2">
                <ul class="list-group">
                    <a id="add" class="list-group-item active">Add All</a>
                    <a id="remove" class="list-group-item">Remove All</a>
                    <a id="add3" class="list-group-item">Add 3rd</a>
                    <a id="remove3" class="list-group-item">Remove 3rd</a>
                </ul>
            </div>
            <div class="col-xs-10">
                <div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
                     oncontextmenu="return false"
                     class='cornerstone-enabled-image'
                     unselectable='on'
                     onselectstart='return false;'
                     onmousedown='return false;'>
                    <div id="axial1"
                         style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
                    </div>
                    <span class="index">0</span>
                </div>
                <div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
                     oncontextmenu="return false"
                     class='cornerstone-enabled-image'
                     unselectable='on'
                     onselectstart='return false;'
                     onmousedown='return false;'>
                    <div id="axial2"
                         style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
                    </div>
                    <span class="index">1</span>
                </div>
                <div style="width:256px;height:256px;position:relative;display:inline-block;color:white;"
                     oncontextmenu="return false"
                     class='cornerstone-enabled-image'
                     unselectable='on'
                     onselectstart='return false;'
                     onmousedown='return false;'>
                    <div id="axial3"
                         style="width:256px;height:256px;top:0px;left:0px; position:absolute;">
                    </div>
                    <span class="index">2</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2">
                <b>Scroll Direction</b>
            </div>
            <div class="col-xs-10">
                <span id="direction"></span>
            </div>
        </div>
    </div>
</body>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>
<script src="../cornerstoneMath.min.js"></script>

<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>
<script>window.cornerstoneTools || document.write('<script src="https://unpkg.com/cornerstone-tools">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>
<script src="../exampleMetaDataProvider.js"></script>

<script>
    var axialElement1 = document.getElementById('axial1');
    var axialElement2 = document.getElementById('axial2');
    var axialElement3 = document.getElementById('axial3');

    var axialImageIds = [
        'example://1',
        'example://2',
        'example://3'
    ];

    var axialStack1 = {
        currentImageIdIndex : 0,
        imageIds: axialImageIds
    };
    var axialStack2 = {
        currentImageIdIndex : 1,
        imageIds: axialImageIds
    };
    var axialStack3 = {
        currentImageIdIndex : 2,
        imageIds: axialImageIds
    };

    var stacks = [
        { element: axialElement1, stack: axialStack1 },
        { element: axialElement2, stack: axialStack2 },
        { element: axialElement3, stack: axialStack3 }]
    ;

    var synchronizer = new cornerstoneTools.Synchronizer("cornerstonestackscroll", cornerstoneTools.stackScrollSynchronizer);

    // Load the proper image in each view port
    for (let s = 0; s < stacks.length; s++) {
        const element = stacks[s].element;
        const stack = stacks[s].stack;

        cornerstone.enable(element);
        cornerstone.loadImage(stack.imageIds[stack.currentImageIdIndex]).then(function(image) {
            // display this image
            cornerstone.displayImage(element, image);

            cornerstoneTools.mouseInput.enable(element);
            cornerstoneTools.mouseWheelInput.enable(element);

            // set the stack as tool state
            cornerstoneTools.addStackStateManager(element, ['stack']);
            cornerstoneTools.addToolState(element, 'stack', stack);

            // Enable all tools we want to use with this element
            cornerstoneTools.stackScroll.activate(element, 1);
            cornerstoneTools.stackScrollWheel.activate(element);

            synchronizer.add(element);
        });
    }

    function activate(id){
        document.querySelectorAll('a').forEach(function(elem) {
          elem.classList.remove('active');
        });

        document.getElementById(id).classList.add('active');
    }

    document.getElementById('add').addEventListener('click', function () {
        activate("add");
        synchronizer.add(axialElement1);
        synchronizer.add(axialElement2);
        synchronizer.add(axialElement3);
        return false;
    });
    document.getElementById('remove').addEventListener('click', function () {
        activate("remove");
        synchronizer.remove(axialElement1);
        synchronizer.remove(axialElement2);
        synchronizer.remove(axialElement3);
        return false;
    });
    document.getElementById('add3').addEventListener('click', function () {
        activate("add3");
        synchronizer.add(axialElement3);
        return false;
    });
    document.getElementById('remove3').addEventListener('click', function () {
        activate("remove3");
        synchronizer.remove(axialElement3);
        return false;
    });


    // Listener for example purposes to demonstrate scroll direction
    document.addEventListener('cornerstonestackscroll', function (e) {
        var eventData = e.detail;

        // Manually display direction
        if (eventData.direction === 0) {
            return;
        }
        document.getElementById('direction').innerHTML = eventData.direction > 0 ? "UP" : "DOWN";

        // Update indices of each stack
        document.querySelectorAll('[id^="axial"]').forEach(function (element) {
            // Resolve the stack and get the current image index
            var targetStackToolDataSource = cornerstoneTools.getToolState(element, 'stack');
            var targetStackData = targetStackToolDataSource.data[0];

            element.parentNode.children.querySelector('.index').innerHTML = targetStackData.currentImageIdIndex;
        });
    });
</script>
</html>
